<template>
  <Card>
    <p slot="title">GIS分区分色安全管理</p>
    <div class="chart" id="chart-gis"></div>
    <Spin v-show="loading" fix size="large" />
  </Card>
</template>

<script>
import "echarts/extension/bmap/bmap";

export default {
  name: "",
  data() {
    return {
      option: null,
      loading: false,
      chartInstance:null
    };
  },
  methods: {
    renderChart() {
      let $this = this;
      let params = {
        indexDate: this.date
      };
      this.showLoading = true;
      this.option = {
        bmap: {
          roam: true
        },
        
        series: [
          {
            name: "散点图",
            type: "effectScatter",
            coordinateSystem: "bmap",
            symbolSize: 15,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              period: 2,
              scale: 3
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                // color: '#9FC33D',
                shadowBlur: 10,
                shadowColor: "#333"
              }
            },
            zlevel: 2
          }
        ]
      };

      this.chartInstance = this.$Crender("chart-gis", this.option);

      let map = this.chartInstance
        .getModel()
        .getComponent("bmap")
        .getBMap();
      map.centerAndZoom("贵阳", 13);
      this.loading = false;
    }
  },

  mounted() {
    this.renderChart();
  }
};
</script>

<style scoped>
.chart {
  height: 500px;
}
</style>